<!DOCTYPE html>
<html>
<head>
    <title>Markdown笔记生成器</title>
    <meta charset="utf-8">
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input[type="url"] { width: 100%; padding: 8px; font-size: 16px; }
        button { background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        .result { margin-top: 20px; }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <h1>Markdown笔记生成器</h1>
    <form id="urlForm">
        <div class="form-group">
            <label for="url">请输入网址:</label>
            <input type="url" id="url" name="url" required placeholder="https://example.com">
        </div>
        <button type="submit">生成Markdown笔记</button>
    </form>
    <div id="result"></div>

    <script>
        document.getElementById('urlForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const url = document.getElementById('url').value;
            const resultDiv = document.getElementById('result');

            resultDiv.innerHTML = '<p>正在处理中...</p>';

            fetch('/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ url: url })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    resultDiv.innerHTML = `<p class="error">错误: ${data.error}</p>`;
                } else {
                    resultDiv.innerHTML = `
                        <p class="success">Markdown笔记已生成!</p>
                        <a href="/download/${data.filename}">点击下载</a>
                    `;
                }
            })
            .catch(error => {
                resultDiv.innerHTML = `<p class="error">请求失败: ${error.message}</p>`;
            });
        });
    </script>
</body>
</html>